<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
    <%@include file="/views/common/include/taglib.jsp"%>
    <%@include file="/views/common/include/head.jsp"%>
    <link rel="stylesheet" href="${ctx}/css/page/person.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/css/page/page.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/css/page/header2.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/reset.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/person-left.css" type="text/css">
	<link rel="stylesheet" href="${ctx}/css/page/footer.css" type="text/css">
	<style>
	.f-sort a.curr {
		background-color: #57B4C6;
		color:#fff;
		display:inline-block;
		font-size:15px;
		font-weight:700;
		height:35px;
		width:100px;
		text-align:center;
		line-height:35px;
	}
	.item-pic{
		width:70px;
		height:70px;
		float:left;
		border:1px solid #ccc;
		margin-right:8px;
	}
	.jifen-table td{
		padding:10px 0;
	}
	.myinteg{
		padding:20px 0 40px 43px;
	}
	.integrbox{
		padding-left:43px;
	}
	.wrap-details{
		padding-top:20px;
	}
	</style>
	<script type="text/javascript">
		var ctx = '${ctx}';
		
		function setCtx(ctx) {
			this.ctx = ctx;
			
		}
		setCtx(ctx);
		
		function exchangeIntegral(){
			window.location.href = ctx +"/mallIntegral";
		}
		
		function changeState(state){
			window.location.href = ctx +"/ownerTreasure/ownerIntegralChangeList?pNo=1"+ "&state=" + state;
		}
		
		function duihuan(){
			window.location.href = ctx +"/mallIntegral";
		}
		
		function gotoPage(page){
			var pages = $("#pages").val();
	    	if(page == null || page == 'undefined'){
	    		page = this.page;
	    	}
	    	if(page < 1 ){
	    		layer.msg("已到达第一页!", {
					time : 2000
				// 2秒关闭（如果不配置，默认是3秒）
				});
	    	} else if(page > pages){
	    		layer.msg("已到达最后一页!", {
					time : 1000
				// 2秒关闭（如果不配置，默认是3秒）
				});
	    	} else {
	    		window.location.href = ctx +"/ownerTreasure/ownerIntegralChangeList?pNo=" + page +"&state=" + state;
	    	}
		}
	</script>	
</head>
<body>
	<jsp:include page="/views/common/head_main.jsp" />
	<div class="bg">
		<div class="contentbox1 contentbox">
			<div class="leftlist">
		        <div class="myorder left">
					<ul>
						<li><a class="order" href="${ctx}/orderInfo/orderInfoListByState" >我的订单</a></li>
						<li><a href="${ctx}/orderInfo/orderInfoListByState?states=0">待付款</a></li>
						<li><a href="${ctx}/orderInfo/orderInfoListByState?states=1">待商家确认</a></li>
						<li><a href="${ctx}/orderInfo/orderInfoListByState?states=2">待发货</a></li>
						<li><a href="${ctx}/orderInfo/orderInfoListByState?states=3,14">待收货</a></li>
						<li><a href="${ctx}/orderInfo/orderInfoListByState?states=6,7,8,10,11,12,13">退款售后</a></li>
					</ul>
				</div>
				<div class="myproperty left">
					<ul>
						<li class="order">我的物业</li>
						<c:if test="${displayFeeBill == 1}">
						<li><a href="${ctx}/propertyBill/getMyBill">我的物业费</a></li>
						</c:if>
						<c:if test="${displayCar == 1}">
						<li><a href="${ctx}/carBill/getCarManage">我的停车费</a></li>
						</c:if>
						<li><a href="${ctx}/propertyRepair/infoList">我的物业报修</a></li>
						<li><a href="${ctx}/propertySuggestion/infoList">我的物业投诉</a></li>
					</ul>
				</div>
				<div class="myassets left">
					<ul>
						<li class="order">我的资产</li>
					    <li><a style="color:red;" href="${ctx}/ownerTreasure/ownerIntegralChangeList?state=0&pNo=1">我的积分</a></li>
						<li><a href="${ctx}/ownerTreasure/getCouponList?pNo=1">优惠券</a></li>
					</ul>
				</div>
				<div class="otherlist left">
					<ul class="others">
						<li class="order">其他</li>
						<li><a  href="${ctx}/ownerOther/getMyCollection">我的收藏</a></li>
						<li><a  href="${ctx}/ownerAddress/ownerAddressList">我的收货地址</a></li>
						<li><a href="${ctx}/complaintsInfo/infoList">我的投诉建议</a></li>
						<li><a href="${ctx}/ownerHouse/ownerHouseList">我的小区</a></li>
						<!-- position需要跳转到特定位置 -->
						<li><a href="${ctx}/main?item=1#openShop">我要开店</a></li>
						<li><a href="${ctx}/usualQuestions/infoList">常见问题</a></li>
					</ul>
				</div>
			</div>
			<%-- <jsp:include page="/views/main/main_personal_left.jsp" /> --%>
			<div class="rightlist">
			<input type="hidden" id="item" value="${sessionScope.item_personal}"/>
				<div class="">
					<div class="topbox">
						我的积分
					</div>
					<hr style="border: 1px dashed #57B4C6;width:100%;"/>
					<div class="myinteg">
						<div class="jifen" style="border:1px solid #9E9E9E;width:555px;height:130px;">
							<div style="margin:25px 0 0 60px;float:left;font-size:15px;">
								<p style="font-size:16px;font-weight:700;text-align:left;">可用积分</p>
								<p style="font-size:28px;color:#56B6C6;font-weight:700;margin-top:10px;text-align:left;">${userIntegral}</p>
							</div>
							<div style="border-left: 1px dashed #57B4C6; height:62px;margin:30px 0 0 90px;float:left;"></div>
							<input style="width:150px;height:50px;margin: 35px 0 0 100px;" class=button-confirm type="button" value="兑换超值商品" onclick="duihuan()">
						</div>
					</div>
				</div>
				<div class="integrbox">
					<div class="wrap-bar">
						<!--积分明细、积分收入、积分支出  -->
						<div style="border-bottom: 2px solid #57B4C6;width:937px;">
							<div class="f-sort" style="text-align:left;font-size: 15px;">
								<a <c:if test="${state == 0}">class="curr" </c:if>onclick="changeState(0)" style="cursor: pointer;margin-right:30px;">积分明细</a>
								<a <c:if test="${state == 1}">class="curr" </c:if>onclick="changeState(1)" style="cursor: pointer;margin-right:30px;">积分收入</a>
								<a <c:if test="${state == 2}">class="curr" </c:if>onclick="changeState(2)" style="cursor: pointer;margin-right:30px;">积分支出</a>
							</div>
						</div>
					</div>
					<div class="wrap-details"> 
						<div>
							<c:forEach items="${integralRecord.list}" var="item" varStatus="status">
								<div>
									<table class="jifen-table">
										<tr>
											<td width="25%">
												编号：<span>${item.id}</span>
											</td>
											<td style="font-size:20px; color: #89C9D5;width:10%;text-align:center;color:#55B4C6"><c:if test="${item.change > 0}">+</c:if><c:if test="${item.change < 0}"></c:if>${item.change}</td>
											<td width="20%" style="text-align:center;"><fmt:formatDate value="${item.recordTime}" type="BOTH" dateStyle="full"/></td>
											<td width="25%;" style="text-align:center">${item.description}</td>
										</tr>
									</table>
								</div>	
							</c:forEach>
						</div>
					</div>
					
					
					
					<div class="page">
					<input id="pages" type="hidden" value="${integralRecord.pages}">
					<ul>
						<li><a class="last-page page-change " onclick="gotoPage(${currentPage-1 });">&lt;上一页</a></li>
						<c:if test="${integralRecord.firstPage > 1}">
							<li onclick="gotoPage(1);"
								class="page-num"><a>1</a></li>
							<c:if test="${integralRecord.firstPage > 2}">
                       		...
                       		</c:if>
						</c:if>
						<c:forEach items="${integralRecord.navigatepageNums }" var="page">
							<li onclick="gotoPage(${page });"
								class="<c:if test="${currentPage == page }">current</c:if>"
								class="page-num"><a>${page}</a></li>
						</c:forEach>
						<c:if test="${integralRecord.lastPage < integralRecord.pages}">
							<c:if test="${integralRecord.firstPage < integralRecord.pages - 1}">
                       		...
                       		</c:if>
							<li onclick="gotoPage(${integralRecord.pages});"
								class="page-num"><a>${integralRecord.pages}</a>
							</li>
						</c:if>
						<li><a class="next-page page-change" onclick="gotoPage(${currentPage+1 });">下一页&gt;</a></li>
					</ul>
				</div>
					
					
					
					<%-- <div style="background-color: #fff; height: 80px;margin-top:250px;">
						<table width="100%">
							<tfoot>
								<tr>
									<td colspan="7">
										<div>
											<div style="float: right; width: 20%;">
												<div style="float: left;">
													<ul class="footer_ul">
														<c:if test="${integralRecord.hasPreviousPage }">
															<li onclick="gotoPage(${currentPage-1 });"
																style="width: 55px;"><a class="leftRight">&lt;上一页</a></li>
														</c:if>
														<c:if test="${integralRecord.firstPage > 1}">
															<li onclick="gotoPage(1);"
																style="width: 24px; text-align: center;"><a>1</a></li>
															<c:if test="${integralRecord.firstPage > 2}">
				                        		...
				                        	</c:if>
														</c:if>
														<c:forEach items="${integralRecord.navigatepageNums }" var="page">
															<li onclick="gotoPage(${page });"
																class="<c:if test="${currentPage == page }">active</c:if>"
																style="border: 1px solid #9A9A9A; width: 24px; text-align: center;">
																<a>${page}</a>
															</li>
														</c:forEach>
														<c:if test="${integralRecord.lastPage < item.pages}">
															<c:if test="${integralRecord.firstPage < item.pages - 1}">
				                        		...
				                        	</c:if>
															<li onclick="gotoPage(${integralRecord.pages});"
																style="border: 1px solid #9A9A9A; width: 24px; text-align: center;">
																<a>${integralRecord.pages}</a>
															</li>
														</c:if>
														<c:if test="${integralRecord.hasNextPage }">
															<li style="width: 55px;"><a
																onclick="gotoPage(${currentPage+1});" class="leftRight">下一页&gt;</a></li>
														</c:if>
													</ul>
												</div> --%>
												<%-- <div style="float:left;  height: 30px;">
									<span style="color: #9A9A9A;">跳转到</span> 
									<input class="inputclass" id="pageNo" onkeydown="if(event.keyCode==13){event.keyCode=0;return false;}" type="text" value="${currentPage }" style="width:22px;height:20px;text-align: center;">
									<span style="color: #9A9A9A;">页</span> 
									<span class="buttonclass" id="J_JumpTo" onclick="gotoCellInfoPage(null);"><a>GO</a></span>
								</div> --%>
											</div>
										</div>
									</td>
								</tr>
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>


	<jsp:include page="/views/common/footer.jsp" />
	<script type="text/javascript">
	</script>
</body>
</html>